<template>
	<view :class="pageClass" :style="pageStyle" v-if="pageReady" style="background-color: #F5F5F5; padding: 0 8px;">
		<moxi-nav :set="navSet"></moxi-nav>
		<view style="width: 100%; min-height: 12px;"></view>
		<view v-if="data && data.length > 0">
			<u-list @scrolltolower="scrolltolower">
				<view class="item" :style="{
					'--app-color': app_color,
					'--app-radius': '8px',
					'--app-color-rgb': colorList[15],
					'--bg-color': '#000',
					'--success-color': '#4CAF50',
					'--warning-color': '#FF8B01',
					'--danger-color': '#EA2121',
				}" v-for="(item, index) in data">
					<view class="personInfo">
						<view class="showImg">
							<u--image width="48px" height="48px" :src="userinfo.pic"></u--image>
						</view>
						<view class="showName">
							<view class="name">{{ userinfo.showname }}</view>
						</view>
						<view class="status"
							:style="{ '--bg-color': item.status == 0 ? '#FF8B01' : item.status == 1 ? '#4CAF50' : '#EA2121' }">
							{{ item.status == 0 ? '待审核' : item.status == 1 ? '已通过' : '不通过' }}
						</view>
					</view>
					<view class="leave">
						<view class="type">
							<view class="title">请假类型:{{ leave_type[item.type] }}</view>
						</view>
						<view class="date">
							<view class="title">请假天数: {{ item.date.length }}天</view>
						</view>
					</view>
					<!-- 如果不通过则展示原因 -->
					<view class="msg" v-if="item.status == 2">
						<u-icon name="close-circle-fill" color="#EA2121" size="14"></u-icon>
						<view class="title u-line-1">不通过原因: {{ item.msg }}</view>
					</view>
					<view class="detail">
						<view :style="{ 'color': app_color, 'background-color': `${app_color}16` }" class="title"
							@click="getInfo(index)">查看详情
						</view>
					</view>
				</view>
			</u-list>
			<u-loadmore :status="hasMore" loadingIcon="spinner" dashed color="#999" />
		</view>
		<!-- 请假记录为空 -->
		<view v-else style="flex: 1; display: flex; justify-content: center; align-items: center;">
			<u-empty mode="list" text="没有请假记录"></u-empty>
		</view>
		<view>
			<u-popup :z-index="998" :overlayStyle="{ zIndex: 997 }" :show="show" @close="close" closeable round="16">
				<view class="show" :style="{ '--app-color': app_color, '--danger-color': '#EA2121' }">
					<view class="personInfo">
						<view class="showImg">
							<u--image width="48px" height="48px" :src="userinfo.pic"></u--image>
						</view>
						<view class="showName">
							<view class="name">{{ userinfo.showname }}</view>
						</view>
						<view class="status"
							:style="{ '--bg-color': currentData.status == 0 ? '#FF8B01' : currentData.status == 1 ? '#4CAF50' : '#EA2121' }">
							{{ currentData.status == 0 ? '待审核' : currentData.status == 1 ? '已通过' : '不通过' }}
						</view>
					</view>
					<view class="scroll_y">
						<view class="form" v-if="currentData">
							<!-- #ifndef MP-ALIPAY -->
							<u-collapse :border="false" :value="['date', 'No_reason']">
								<!-- #endif -->
								<view class="form_item">
									<view class="title">请假类型:</view>
									<view class="content">{{ leave_type[currentData.type] }}</view>
								</view>
								<!-- #ifndef MP-ALIPAY -->
								<u-collapse-item title="请假日期:" name="date">
									<!-- #ifndef MP-WEIXIN -->
									<view slot="title" style="margin-left: -4px;">请假日期:</view>
									<view slot="right-icon">
										<u-icon :size="16" name="arrow-right"></u-icon>
									</view>
									<!-- #endif -->
									<view class="tagList">
										<view class="tag" v-for="(item, index) in currentData.date" :key="index"
											:style="{ 'background-color': `${app_color}16` }">
											{{ item }}
										</view>
									</view>
								</u-collapse-item>
								<!-- #endif -->
								<!-- #ifdef MP-ALIPAY -->
								<view class="form_item column"
									style="padding-top: 10px; border-top: 0.5px solid rgba(0, 0, 0, 0.1);">
									<view class="title">请假日期:</view>
									<view class="tagList">
										<view class="tag" v-for="(item, index) in currentData.date" :key="index"
											:style="{ 'background-color': `${app_color}16` }">
											{{ item }}
										</view>
									</view>
								</view>
								<!-- #endif -->
								<view class="form_item" v-if="currentData.date"
									style="padding-top: 10px; border-top: 0.5px solid rgba(0, 0, 0, 0.1);">
									<view class="title">请假天数:</view>
									<view class="content">{{ currentData.date.length }}天</view>
								</view>
								<view style="border-bottom: 0.5px solid rgba(0, 0, 0, 0.1); padding-top: 10px;"
									v-if="!currentData.reason"></view>
								<!-- #ifndef MP-ALIPAY -->
								<u-collapse-item title="请假原因:" name="noReason">
									<!-- #ifndef MP-WEIXIN -->
									<view slot="title" style="margin-left: -4px;">请假原因:</view>
									<view slot="right-icon">
										<u-icon :size="16" name="arrow-right"></u-icon>
									</view>
									<!-- #endif -->
									<view class="showReason" v-if="currentData.img_list"
										:style="{ 'padding-bottom': currentData.img_list.length > 0 ? '72px' : '12px' }">
										<view class="textArea">
											<view class="text">
												{{ currentData.reason }}
											</view>
										</view>
										<view class="showImageList" v-if="currentData.img_list">
											<view class="imgItem" v-for="(item, index) in currentData.img_list"
												:key="index">
												<!-- 百度 图片预览 preview -->
												<image :src="item" mode="scaleToFill"
													style="width: 48px; height: 48px; border-radius: 8px;"
													@click="previewImage(index)" preview />

											</view>
										</view>
									</view>
								</u-collapse-item>
								<!-- #endif -->
								<!-- #ifdef MP-ALIPAY -->
								<view class="form_item column"
									style="padding-top: 10px; border-top: 0.5px solid rgba(0, 0, 0, 0.1);">
									<view class="title">请假原因:</view>
									<view class="showReason" v-if="currentData.img_list"
										:style="{ 'padding-bottom': currentData.img_list.length > 0 ? '72px' : '12px' }">
										<view class="textArea">
											<view class="text">
												{{ currentData.reason }}
											</view>
										</view>
										<view class="showImageList" v-if="currentData.img_list">
											<view class="imgItem" v-for="(item, index) in currentData.img_list"
												:key="index">
												<u--image :showLoading="true" :src="item" width="48px" height="48px"
													radius="8px" mode="scaleToFill"
													@click="previewImage(index)"></u--image>
											</view>
										</view>
									</view>
								</view>
								<!-- #endif -->
								<view style="border-bottom: 0.5px solid rgba(0, 0, 0, 0.1); margin: 0 16px;"
									v-if="currentData.status == 2"></view>
								<!-- #ifndef MP-ALIPAY -->
								<u-collapse-item title="审批反馈:" name="No_reason" v-if="currentData.msg">
									<!-- #ifndef MP-WEIXIN -->
									<view slot="title" style="margin-left: -4px;">审批反馈:</view>
									<view slot="right-icon">
										<u-icon :size="16" name="arrow-right"></u-icon>
									</view>
									<!-- #endif -->
									<view class="showReason" style="padding-bottom: 12px;">
										<view class="textArea">
											<view class="text">
												{{ currentData.msg }}
											</view>
										</view>
									</view>
								</u-collapse-item>
								<!-- #endif -->
								<!-- #ifdef MP-ALIPAY -->
								<view class="form_item column" v-if="currentData.msg"
									style="padding-top: 10px; border-top: 0.5px solid rgba(0, 0, 0, 0.1);">
									<view class="title">审批反馈:</view>
									<view class="showReason" style="padding-bottom: 12px;">
										<view class="textArea">
											<view class="text">
												{{ currentData.msg }}
											</view>
										</view>
									</view>
								</view>
								<!-- #endif -->
								<!-- #ifndef MP-ALIPAY -->
							</u-collapse>
							<!-- #endif -->
						</view>
					</view>
					<view class="btnArea" v-if="currentData.status == 0">
						<view class="controll">
							<view class="btn" style="background-color: var(--danger-color);"
								@click="delRecord(currentData)">删除</view>
							<view class="btn" style="background-color: var(--app-color);"
								@click="editRecord(currentData)">
								修改</view>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
		<moxi-tabbar :set="tabbar" v-if="tabbar.index_id"></moxi-tabbar>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabs: [{
				name: '全部',
				value: 0
			},
			{
				name: '待审核',
				value: 1
			},
			{
				name: '已通过',
				value: 2
			},
			{
				name: '不通过',
				value: 3
			}
			],
			current: 0,
			page: 1,
			page_num: 10,
			data: [],
			leave_type: {},
			show: false,
			currentData: {},
			hasMore: 'loadmore', // 默认有更多
		};
	},
	onLoad() {
		this.moxiPost(
			'/plugin/oa/user/time_off/get_type', (res) => {
				if (res && res.data) {
					// res.data = {'事假', '病假', '年假', '婚假', '产假', '陪产假', '丧假', '其他'};
					this.leave_type = res.data;
					this.getLeaveList();
				}
			}
		)
	},
	methods: {
		// 获取请假列表数据
		getLeaveList() {
			this.moxiPost(
				'/plugin/oa/user/time_off/get', {
				page: this.page,
				page_num: this.page_num
			}, (res) => {
				if (res && res.data) {
					// res.data.data插入到this.data中
					res.data.data.forEach(item => {
						this.data.push(item);
					});
					if (res.data.data.length < this.page_num) {
						this.hasMore = 'nomore'; // 没有数据了
					}
				}
			}
			);
		},
		// 修改记录
		editRecord(data) {
			this.cache('plugin_oa/clock_leave', data);
			this.navto('/plugin_oa/clock_leave');
		},
		// 删除记录
		delRecord(data) {
			this.isBox('警告', (res) => {
				this.moxiPost(
					'/plugin/oa/user/time_off/del', {
					'id': data.id,
					'uid': data.uid
				}, (res) => {
					this.show = false;
					this.data = this.data.filter(item => item.id != data.id);
					this.msg(res.hint);
				})
			}, '删除后将无法恢复，请谨慎操作!');

		},
		previewImage(index) {
			// #ifndef MP-BAIDU
			uni.previewImage({
				current: this.currentData.img_list[index],
				urls: this.currentData.img_list
			});
			// #endif
		},
		close() {
			this.show = false
		},
		getInfo(index) {
			this.show = true;
			this.currentData = this.data[index];
		},
		async scrolltolower() {
			if (this.hasMore == 'loadmore') {
				this.page++;
				await this.getLeaveList();
			}
		},
		getBgColor() {
			const match = this.pageStyle.match(/background:\s*([^;]+);/);
			return match ? match[1] : '';
		},
	},
}
</script>

<style lang="scss" scoped>
@mixin flex($gap: 8px, $ju: space-between, $al: center, $fd: row, $wrap: nowrap) {
	display: flex;
	justify-content: $ju;
	align-items: $al;
	gap: $gap;
	flex-wrap: $wrap;
	flex-direction: $fd;
}

.item {
	background-color: #fff;
	padding: 16px;
	border-radius: var(--app-radius);
	margin-bottom: 12px;

	&:last-of-type {
		margin-bottom: 0;
	}

	.leave {
		@include flex(24px, space-between);
		font-size: 14px;
		color: #999;
		white-space: nowrap;
		margin-bottom: 12px;

		.date {
			@include flex(4px, normal);
		}
	}

	.msg {
		margin-bottom: 12px;
		padding: 4px 8px;
		background-color: rgba($color: #EA2121, $alpha: 0.1);
		border-radius: 4px;
		color: #EA2121;
		font-size: 14px;
		@include flex(4px, flex-start);
	}

	.detail {
		@include flex(0, flex-end);

		.title {
			padding: 2px 16px;
			border-radius: 4px;
		}
	}
}

.show {
	margin-top: 36px;

	.personInfo {
		border: none;
		margin: 0 16px 4px;
	}

	.scroll_y {
		max-height: 70vh;
		overflow-y: auto;

		.form {
			.form_item {
				@include flex(0, space-between);
				font-size: 14px;
				color: #999;
				padding-bottom: 10px;
				border-bottom: 0.5px solid rgba($color: #000000, $alpha: 0.1);
				margin: 0 16px;

				&.column {
					gap: 8px;
					flex-direction: column;
					align-items: flex-start;
				}

				&:last-of-type {
					border-bottom: none;
					margin-bottom: 0;
					padding-bottom: 0;
				}

				.title {
					font-size: 15px;
					color: #000;
				}
			}

			.tagList {
				@include flex(4px, flex-start, center, row, wrap);
				font-size: 14px;
				white-space: nowrap;

				.tag {
					border: 1px solid var(--app-color);
					padding: 4px 8px;
					color: var(--app-color);
					border-radius: 4px;
				}
			}

			.showReason {
				background-color: #f5f5f5;
				border-radius: 6px;
				padding: 12px;
				padding-bottom: 72px;
				font-size: 16px;
				color: #999;
				line-height: 1.2;
				position: relative;
				flex: 1;
				width: calc(100% - 24px);

				.textArea {
					width: 100%;
					height: 72px;
					overflow-x: hidden;
					overflow-y: auto;
				}

				.showImageList {
					width: 100%;
					height: 48px;
					position: absolute;
					left: 12px;
					bottom: 12px;
					@include flex(4px, flex-start, center, row, wrap);
					overflow-x: auto;
					overflow-y: hidden;

					.imgItem {
						border-radius: 8px;
						overflow: hidden;
						flex-shrink: 0;
					}
				}
			}
		}
	}

	.btnArea {
		margin: 10px 16px;
		@include flex(0, center);

		.controll {
			@include flex(0, center);
			display: inline-flex;
			font-size: 16px;
			color: #fff;
			border-radius: 4px;
			overflow: hidden;

			.btn {
				padding: 4px 56px;
			}
		}
	}
}

.personInfo {
	@include flex(8px, space-between);
	padding-bottom: 12px;
	border-bottom: 0.5px solid rgba($color: #000000, $alpha: 0.1);
	margin-bottom: 12px;

	.showImg {
		border-radius: var(--app-radius);
		overflow: hidden;
	}

	.showName {
		margin: 0 auto 0 0;
		font-size: 16px;
		color: #000;
		font-weight: bold;
	}

	.status {
		@include flex(0);
		font-size: 12px;
		padding: 1px 12px;
		border: 1px solid var(--bg-color);
		color: var(--bg-color);
		border-radius: 4px;
	}
}

.u-line {
	border: none;
}
</style>